<!--
 * @Author: jhw
 * @Date: 2025-08-13 13:14:17
 * @LastEditors: jhw
 * @LastEditTime: 2025-08-22 16:51:55
 * @Description:
-->
<template>
  <div
    :class="{
      'text-center': computedStatus.position,
    }"
  >
    <MaterialsHeader :serialNum="serialNum" v-bind="computedStatus" />
    <ElDatePicker
      v-model="dateValue"
      :type="computedStatus.type?.value as unknown as DatePickType"
      placeholder="选择日期时间"
      @change="emitAnswer"
    />
  </div>
</template>

<script setup lang="ts">
import MaterialsHeader from '@/components/SurveyComs/Common/MaterialsHeader.vue';
import { SurveyComNameEnum, type TypeStatus } from '@/types';
import {
  getCurrentStatus,
  getStringStatusByCurrentStatus,
  getTextStatus,
  getValueStatusByCurrentStatus,
} from '@/utils';
import type { DatePickType } from 'element-plus';
import { computed, ref } from 'vue';

const emit = defineEmits(['updateAnswer']);
const dateValue = ref<Date>(new Date());

const props = defineProps<{
  componentId: string;
  status: TypeStatus;
  serialNum: number;
}>();

const computedStatus = computed(() => ({
  title: getTextStatus(props.status.title),
  desc: getTextStatus(props.status.desc),
  type: getValueStatusByCurrentStatus(props.status.type),
  position: getCurrentStatus(props.status.position),
  titleSize: getStringStatusByCurrentStatus(props.status.titleSize),
  descSize: getStringStatusByCurrentStatus(props.status.descSize),
  titleWeight: getCurrentStatus(props.status.titleWeight),
  descWeight: getCurrentStatus(props.status.descWeight),
  titleItalic: getCurrentStatus(props.status.titleItalic),
  descItalic: getCurrentStatus(props.status.descItalic),
  titleColor: getTextStatus(props.status.titleColor),
  descColor: getTextStatus(props.status.descColor),
}));

const emitAnswer = () => {
  emit('updateAnswer', {
    serialNum: props.serialNum,
    title: computedStatus.value.title,
    answer:
      dateValue.value.toLocaleDateString().replace(/\//g, '-') +
      ' ' +
      dateValue.value.toLocaleTimeString(),
    type: SurveyComNameEnum.dateTime,
    componentId: props.componentId,
  });
};
</script>

<style scoped></style>
